Tooltip-Implementierung: Barrierefreie Informationen bei Hover und Fokus

Tooltips sind kleine, kontextbezogene Hilfenachrichten, die erscheinen, wenn ein Benutzer mit dem Mauszeiger über ein Element fährt oder es fokussiert. Sie können zusätzliche Informationen bereitstellen, den Zweck eines Elements verdeutlichen oder Hinweise zur Verwendung einer Funktion geben. Allerdings können Tooltips leicht zu Barrierefreiheits-Alpträumen werden, wenn sie nicht korrekt implementiert sind. Dieser Leitfaden beschreibt bewährte Methoden zur Erstellung von Tooltips, die für alle, einschließlich Nutzer mit Behinderungen, verwendbar sind.

Warum Barrierefreiheit bei Tooltips wichtig ist

Barrierefreiheit geht nicht nur um die Einhaltung von Vorschriften; es geht darum, eine bessere Benutzererfahrung für alle zu schaffen. Wenn Tooltips nicht barrierefrei sind, können sie Nutzer ausschließen, die auf assistierende Technologien wie Screenreader, Tastaturnavigation oder Spracheingabe angewiesen sind. Betrachten Sie diese Szenarien:

• Nutzer von Screenreadern: Wenn ein Tooltip nicht korrekt ausgezeichnet ist, kündigt ein Screenreader seine Anwesenheit oder seinen Inhalt möglicherweise nicht an.
• Tastaturnutzer: Wenn ein Tooltip nur bei Hover erscheint, können Tastaturnutzer nicht darauf zugreifen.
• Nutzer mit motorischen Einschränkungen: Präzise Mausbewegungen, die für Hover-Interaktionen erforderlich sind, können eine Herausforderung oder unmöglich sein.
• Nutzer mit kognitiven Behinderungen: Ein schlecht getimter oder verwirrender Tooltip kann Frustration erzeugen und das Verständnis behindern.

Indem wir bewährte Praktiken der Barrierefreiheit befolgen, können wir sicherstellen, dass Tooltips die Benutzererfahrung für alle verbessern anstatt sie zu beeinträchtigen.

Schlüsselprinzipien für barrierefreie Tooltips

Die folgenden Prinzipien sind entscheidend für die Erstellung barrierefreier Tooltips:

1. Alternativen Zugang bieten: Stellen Sie sicher, dass Tooltips sowohl über Hover als auch über Tastaturfokus zugänglich sind.
2. ARIA-Attribute verwenden: Verwenden Sie ARIA-Attribute (Accessible Rich Internet Applications), um Tooltips für assistierende Technologien korrekt zu identifizieren und zu beschreiben.
3. Fokus verwalten: Kontrollieren Sie, wohin der Fokus geht, wenn ein Tooltip angezeigt und ausgeblendet wird.
4. Ausreichenden Kontrast sicherstellen: Sorgen Sie für ausreichend Farbkontrast zwischen dem Tooltip-Text und dem Hintergrund.
5. Genügend Zeit lassen: Geben Sie den Nutzern genug Zeit, den Inhalt des Tooltips zu lesen.
6. Sie ausblendbar machen: Bieten Sie eine klare Möglichkeit, den Tooltip zu schließen.
7. Übermäßigen Gebrauch vermeiden: Verwenden Sie Tooltips sparsam und nur, wenn es notwendig ist.

Implementierungstechniken

1. Verwendung von Hover und Fokus

Der kritischste Aspekt barrierefreier Tooltips ist die Sicherstellung, dass sie sowohl für Maus- als auch für Tastaturnutzer zugänglich sind. Das bedeutet, der Tooltip sollte sowohl bei Hover als auch bei Fokussierung des Elements erscheinen.

HTML:

            <a href="#" aria-describedby="tooltip-example">Beispiel-Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dies ist ein Beispiel-Tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Sicherstellen, dass der Tooltip im Vordergrund ist */
}

            

              
                Copy
              
            
          

Erklärung:

• aria-describedby: Dieses Attribut verknüpft den Link über seine ID mit dem Tooltip-Element. Dies teilt assistierenden Technologien mit, dass der Tooltip zusätzliche Informationen zum Link bereitstellt.
• role="tooltip": Diese ARIA-Rolle identifiziert das Element als Tooltip.
• Das CSS verwendet den benachbarten Geschwisterselektor (+), um den Tooltip anzuzeigen, wenn der Link überfahren oder fokussiert wird.

JavaScript (Erweiterte Steuerung - Optional):

Während CSS einfache Ein-/Ausblendungen bewältigen kann, ermöglicht JavaScript eine robustere Steuerung, insbesondere wenn Tooltips dynamisch generiert werden oder komplexeres Verhalten erfordern.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Verwendung von ARIA-Attributen

ARIA-Attribute sind unerlässlich, um assistierenden Technologien semantische Informationen bereitzustellen. Hier ist eine Aufschlüsselung der wichtigsten Attribute:

• aria-describedby: Wie bereits erwähnt, stellt dieses Attribut die Beziehung zwischen dem auslösenden Element und dem Tooltip-Element her.
• role="tooltip": Dieses Attribut definiert das Element explizit als Tooltip.
• aria-hidden="true"/aria-hidden="false": Verwenden Sie diese, um anzuzeigen, ob der Tooltip derzeit für assistierende Technologien sichtbar ist. Wenn der Tooltip ausgeblendet ist, setzen Sie aria-hidden="true". Wenn er sichtbar ist, setzen Sie aria-hidden="false". Dies ist besonders wichtig, wenn JavaScript zur Steuerung der Sichtbarkeit des Tooltips verwendet wird.

Beispiel:

            <button aria-describedby="help-tooltip">Senden</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klicken Sie hier, um das Formular abzusenden.</div>
            

              
                Copy
              
            
          

JavaScript (für aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Fokusmanagement

Wenn ein Tooltip erscheint, sollte er im Allgemeinen *nicht* den Fokus vom auslösenden Element stehlen. Der Fokus sollte auf dem Element bleiben, das den Tooltip ausgelöst hat. Dies stellt sicher, dass Tastaturnutzer die Seite ohne unerwartete Unterbrechungen weiter navigieren können.

Es kann jedoch Situationen geben, in denen Sie den Fokus *absichtlich* auf den Tooltip verschieben möchten, insbesondere wenn der Tooltip interaktive Elemente (z. B. Links, Schaltflächen) enthält. In diesem Fall stellen Sie sicher, dass:

• Der Tooltip visuell hervorgehoben ist, um anzuzeigen, dass er den Fokus hat.
• Es eine klare Möglichkeit gibt, den Fokus auf das ursprüngliche auslösende Element zurückzusetzen (z. B. eine Schließen-Schaltfläche im Tooltip).

In den meisten Fällen ist es für die Einfachheit und Benutzerfreundlichkeit vorzuziehen, auf ein Fokusmanagement innerhalb des Tooltips selbst zu verzichten.

4. Sicherstellung eines ausreichenden Kontrasts

Farbkontrast ist entscheidend für die Lesbarkeit. Stellen Sie sicher, dass die Textfarbe in Ihren Tooltips einen ausreichenden Kontrast zum Hintergrund aufweist. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett).

Verwenden Sie Online-Kontrastprüfer, um sicherzustellen, dass Ihre Farbauswahl den Barrierefreiheitsstandards entspricht. Beispiele für Kontrastprüfer sind:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Beispiel (Guter Kontrast):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Beispiel (Schlechter Kontrast):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Ausreichend Zeit gewähren

Benutzer benötigen ausreichend Zeit, um den Inhalt des Tooltips zu lesen. Vermeiden Sie Tooltips, die zu schnell verschwinden. Obwohl es keine magische Zahl gibt, streben Sie eine minimale Anzeigezeit von einigen Sekunden an. Der Tooltip sollte auch so lange sichtbar bleiben, wie der Benutzer über das auslösende Element hovert oder es fokussiert hat. Wenn Sie den Tooltip aufgrund anderer Ereignisse schließen müssen, geben Sie einen Hinweis, dass der Tooltip geschlossen wird.

Wenn der Inhalt des Tooltips lang ist, sollten Sie eine Möglichkeit für den Benutzer in Betracht ziehen, den Tooltip manuell zu schließen (z. B. eine Schließen-Schaltfläche oder das Drücken der Escape-Taste).

6. Sie ausblendbar machen

Obwohl Tooltips oft automatisch verschwinden, wenn der Benutzer die Maus wegbewegt oder den Fokus entfernt, ist es eine gute Praxis, eine klare Möglichkeit zum manuellen Schließen bereitzustellen, insbesondere bei langen Tooltips oder solchen, die interaktive Elemente enthalten.

Methoden zum Schließen von Tooltips:

• Schließen-Button: Fügen Sie eine visuell auffällige Schließen-Schaltfläche in den Tooltip ein.
• Escape-Taste: Ermöglichen Sie es den Benutzern, den Tooltip durch Drücken der Escape-Taste zu schließen.
• Klick außerhalb: Schließen Sie den Tooltip, wenn der Benutzer irgendwo außerhalb des Tooltips und des auslösenden Elements klickt. (Mit Vorsicht verwenden, da dies störend sein kann).

Beispiel (Schließen-Button):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dies ist mein Tooltip-Inhalt.
  <button onclick="hideTooltip()">Schließen</button>
</div>
            

              
                Copy
              
            
          

Beispiel (Escape-Taste):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Ersetzen Sie dies durch Ihre tatsächliche Funktion zum Ausblenden des Tooltips
  }
});

            

              
                Copy
              
            
          

7. Übermäßigen Gebrauch vermeiden

Tooltips sollten sparsam und nur dann verwendet werden, wenn sie wirklich hilfreiche Informationen liefern. Eine übermäßige Nutzung von Tooltips kann die Benutzeroberfläche überladen, Benutzer ablenken und zu einer frustrierenden Erfahrung führen.

Alternativen zu Tooltips:

• Klare Beschriftungen: Verwenden Sie klare und beschreibende Beschriftungen für Formularfelder, Schaltflächen und Links.
• Kontextbezogene Hilfe: Stellen Sie Hilfetexte direkt in der Benutzeroberfläche in der Nähe der relevanten Elemente bereit.
• Hilfedokumentation: Verlinken Sie zu umfassender Hilfedokumentation für komplexere Funktionen.

Erweiterte Überlegungen

Dynamischer Inhalt

Wenn der Inhalt Ihres Tooltips dynamisch generiert wird (z. B. aus einer API geladen oder basierend auf Benutzereingaben aktualisiert), stellen Sie sicher, dass das aria-describedby-Attribut und die Sichtbarkeit des Tooltips entsprechend aktualisiert werden. Verwenden Sie JavaScript, um diese Aktualisierungen zu verwalten.

Positionierung

Überlegen Sie sorgfältig die Positionierung Ihrer Tooltips. Vermeiden Sie es, sie so zu platzieren, dass sie wichtige Inhalte verdecken oder Layoutverschiebungen verursachen. Achten Sie auf unterschiedliche Bildschirmgrößen und Auflösungen und verwenden Sie CSS, um sicherzustellen, dass Tooltips immer innerhalb des sichtbaren Bereichs (Viewport) bleiben.

Mobile Geräte

Tooltips basieren traditionell auf Hover-Interaktionen, die auf Touch-Geräten nicht verfügbar sind. Für mobile Geräte sollten alternative Interaktionsmethoden in Betracht gezogen werden, wie zum Beispiel:

• Tippen: Zeigen Sie den Tooltip an, wenn der Benutzer auf das Element tippt.
• Langes Drücken: Zeigen Sie den Tooltip an, wenn der Benutzer das Element lange drückt.
• Bei Fokus anzeigen: Anzeigen, wenn das Element den Fokus erhält. Dies kann mit JavaScript erreicht werden, indem die Touch-Unterstützung geprüft wird (z. B. `('ontouchstart' in window)`) und das Anzeigeverhalten entsprechend geändert wird.

Testen Ihrer Tooltips

Testen Sie Ihre Tooltips gründlich, um sicherzustellen, dass sie für alle Benutzer zugänglich sind. Verwenden Sie eine Kombination aus manuellen Tests und automatisierten Barrierefreiheitstools.

Testmethoden:

• Tastaturnavigation: Überprüfen Sie, ob Tooltips mit der Tastatur zugänglich sind.
• Screenreader-Tests: Verwenden Sie einen Screenreader, um sicherzustellen, dass Tooltips korrekt angekündigt werden.
• Farbkontrastanalyse: Verwenden Sie einen Farbkontrastprüfer, um ausreichenden Kontrast zu überprüfen.
• Mobile Tests: Testen Sie Tooltips auf verschiedenen mobilen Geräten und Bildschirmgrößen.
• Automatisierte Barrierefreiheitstests: Verwenden Sie Tools wie axe DevTools, WAVE oder Lighthouse, um potenzielle Barrierefreiheitsprobleme zu identifizieren.

Internationalisierung (i18n) und Lokalisierung (l10n)

Bei der Entwicklung von Tooltips für ein globales Publikum sollten Sie Internationalisierung und Lokalisierung berücksichtigen:

• Textrichtung: Unterstützen Sie sowohl Links-nach-Rechts- (LTR) als auch Rechts-nach-Links- (RTL) Textrichtungen. Verwenden Sie logische CSS-Eigenschaften (z. B. `margin-inline-start`, `margin-inline-end`) anstelle von physischen Eigenschaften (z. B. `margin-left`, `margin-right`) für das Layout.
• Sprachspezifische Übersetzungen: Stellen Sie Übersetzungen des Tooltip-Inhalts für verschiedene Sprachen bereit.
• Datums- und Zeitformate: Passen Sie Datums- und Zeitformate an die Ländereinstellung des Benutzers an.
• Zahlenformate: Verwenden Sie geeignete Zahlenformate für verschiedene Regionen (z. B. Dezimaltrennzeichen, Tausendertrennzeichen).

Fazit

Die Implementierung barrierefreier Tooltips erfordert sorgfältige Planung und Liebe zum Detail. Indem Sie die in diesem Leitfaden beschriebenen Prinzipien und Techniken befolgen, können Sie Tooltips erstellen, die für jeden, unabhängig von seinen Fähigkeiten, nutzbar sind. Denken Sie daran, dass Barrierefreiheit ein fortlaufender Prozess ist, also testen und verfeinern Sie Ihre Tooltips weiterhin, um sicherzustellen, dass sie den Bedürfnissen all Ihrer Benutzer entsprechen.

Ressourcen

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA